<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个留言板显示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background: linear-gradient(135deg, #ff7e5f, #feb47b);
            color: white;
        }
        .message-board {
            width: 80%;
            margin: 20px 0;
            padding: 20px;
            background: linear-gradient(135deg, #00b894, #00d26a);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            display: none;
        }
        .message-board.active {
            display: block;
        }
        .message-board h2 {
            margin-top: 0;
        }
        .message-board ul {
            list-style-type: none;
            padding: 0;
        }
        .message-board li {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        #control-panel {
            margin-top: 20px;
        }
        #control-panel select {
            padding: 5px;
            font-size: 16px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #control-panel input {
            padding: 5px;
            font-size: 16px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #control-panel button {
            padding: 5px 10px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #control-panel button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>多个留言板显示</h1>
    <div id="control-panel">
        <label for="board-select">选择留言板：</label>
        <select id="board-select">
            <option value="board1">留言板1</option>
            <option value="board2">留言板2</option>
            <option value="board3">留言板3</option>
        </select>
        <input type="text" id="message-input" placeholder="输入留言内容">
        <button id="post-message">发布留言</button>
    </div>

    <div id="board1" class="message-board active">
        <h2>留言板1</h2>
        <ul id="messages1"></ul>
    </div>
    <div id="board2" class="message-board">
        <h2>留言板2</h2>
        <ul id="messages2"></ul>
    </div>
    <div id="board3" class="message-board">
        <h2>留言板3</h2>
        <ul id="messages3"></ul>
    </div>

    <script>
        const boardSelect = document.getElementById('board-select');
        const messageInput = document.getElementById('message-input');
        const postMessageButton = document.getElementById('post-message');
        const boards = {
            board1: document.getElementById('board1'),
            board2: document.getElementById('board2'),
            board3: document.getElementById('board3')
        };
        const messages = {
            board1: document.getElementById('messages1'),
            board2: document.getElementById('messages2'),
            board3: document.getElementById('messages3')
        };

        boardSelect.addEventListener('change', () => {
            for (const boardId in boards) {
                if (boardId === boardSelect.value) {
                    boards[boardId].classList.add('active');
                } else {
                    boards[boardId].classList.remove('active');
                }
            }
        });

        postMessageButton.addEventListener('click', () => {
            const messageText = messageInput.value.trim();
            if (messageText) {
                const selectedBoard = boardSelect.value;
                const messageList = messages[selectedBoard];
                const newMessage = document.createElement('li');
                newMessage.textContent = messageText;
                messageList.appendChild(newMessage);
                messageInput.value = '';
            }
        });
    </script>
</body>
</html>